<template>
  <div class="data-statistics">
    <!-- 统计卡片区域 -->
    <div class="stats-cards">
      <!-- 用户数量卡片 -->
      <div class="stats-card">
        <div class="card-header">
          <div class="card-icon user-icon">
            <svg
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
            >
              <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
              <circle cx="12" cy="7" r="4"></circle>
            </svg>
          </div>
          <div class="card-title">用户数量</div>
        </div>
        <div class="card-content">
          <div class="total-number">{{ userStats.total.toLocaleString() }}</div>
          <div class="stats-breakdown">
            <div class="stat-item">
              <span class="stat-label">今日新增</span>
              <span class="stat-value">+{{ userStats.today }}</span>
            </div>
            <div class="stat-item">
              <span class="stat-label">本周新增</span>
              <span class="stat-value">+{{ userStats.week }}</span>
            </div>
            <div class="stat-item">
              <span class="stat-label">本月新增</span>
              <span class="stat-value">+{{ userStats.month }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 会员数量卡片 -->
      <div class="stats-card">
        <div class="card-header">
          <div class="card-icon vip-icon">
            <svg
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
            >
              <path d="M12 2L2 7l10 5 10-5-10-5z"></path>
              <path d="M2 17l10 5 10-5"></path>
              <path d="M2 12l10 5 10-5"></path>
            </svg>
          </div>
          <div class="card-title">会员数量</div>
        </div>
        <div class="card-content">
          <div class="total-number">{{ vipStats.total.toLocaleString() }}</div>
          <div class="stats-breakdown">
            <div class="stat-item">
              <span class="stat-label">VIP会员</span>
              <span class="stat-value">{{ vipStats.vip }}</span>
            </div>
            <div class="stat-item">
              <span class="stat-label">SVIP会员</span>
              <span class="stat-value">{{ vipStats.svip }}</span>
            </div>
            <div class="stat-item">
              <span class="stat-label">本月新增</span>
              <span class="stat-value">+{{ vipStats.month }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 充值统计卡片 -->
      <div class="stats-card">
        <div class="card-header">
          <div class="card-icon recharge-icon">
            <svg
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
            >
              <line x1="12" y1="1" x2="12" y2="23"></line>
              <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path>
            </svg>
          </div>
          <div class="card-title">充值统计</div>
        </div>
        <div class="card-content">
          <div class="total-number">¥{{ rechargeStats.total.toLocaleString() }}</div>
          <div class="stats-breakdown">
            <div class="stat-item">
              <span class="stat-label">今日充值</span>
              <span class="stat-value">¥{{ rechargeStats.today.toLocaleString() }}</span>
            </div>
            <div class="stat-item">
              <span class="stat-label">本周充值</span>
              <span class="stat-value">¥{{ rechargeStats.week.toLocaleString() }}</span>
            </div>
            <div class="stat-item">
              <span class="stat-label">本月充值</span>
              <span class="stat-value">¥{{ rechargeStats.month.toLocaleString() }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- AI调用统计卡片 -->
      <div class="stats-card">
        <div class="card-header">
          <div class="card-icon ai-icon">
            <svg
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
            >
              <path d="M12 2L2 7v10c0 5.55 3.84 10 9 10s9-4.45 9-10V7L12 2z"></path>
              <path d="M8 12h8"></path>
              <path d="M8 16h8"></path>
              <path d="M10 8h4"></path>
            </svg>
          </div>
          <div class="card-title">AI调用统计</div>
        </div>
        <div class="card-content">
          <div class="total-number">{{ aiStats.total.toLocaleString() }}</div>
          <div class="stats-breakdown">
            <div class="stat-item">
              <span class="stat-label">今日调用</span>
              <span class="stat-value">{{ aiStats.today.toLocaleString() }}</span>
            </div>
            <div class="stat-item">
              <span class="stat-label">文本生成</span>
              <span class="stat-value">{{ aiStats.text }}</span>
            </div>
            <div class="stat-item">
              <span class="stat-label">图像生成</span>
              <span class="stat-value">{{ aiStats.image }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 统计图表区域 -->
    <div class="charts-container">
      <!-- 用户统计图表 -->
      <div class="chart-card">
        <div class="chart-header">
          <h3 class="chart-title">用户统计趋势</h3>
          <div class="chart-period">
            <button
              v-for="period in periods"
              :key="period.value"
              :class="['period-btn', { active: currentPeriod === period.value }]"
              @click="currentPeriod = period.value"
            >
              {{ period.label }}
            </button>
          </div>
        </div>
        <div class="chart-content">
          <div ref="userChart" class="chart-canvas"></div>
        </div>
      </div>

      <!-- 充值统计图表 -->
      <div class="chart-card">
        <div class="chart-header">
          <h3 class="chart-title">充值统计趋势</h3>
          <div class="chart-period">
            <button
              v-for="period in periods"
              :key="period.value"
              :class="['period-btn', { active: currentRechargePeriod === period.value }]"
              @click="currentRechargePeriod = period.value"
            >
              {{ period.label }}
            </button>
          </div>
        </div>
        <div class="chart-content">
          <div ref="rechargeChart" class="chart-canvas"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue'
import * as echarts from 'echarts'
import { useRoute } from 'vue-router'

const router = useRoute()
console.log(router.query, 123)

// 统计卡片数据
const userStats = ref({
  total: 12568,
  today: 156,
  week: 892,
  month: 3245,
})

const vipStats = ref({
  total: 3456,
  vip: 2456,
  svip: 1000,
  month: 567,
})

const rechargeStats = ref({
  total: 256800,
  today: 5680,
  week: 35670,
  month: 125600,
})

const aiStats = ref({
  total: 89432,
  today: 3245,
  text: 52340,
  image: 37092,
})

// 图表相关
const userChart = ref<HTMLElement>()
const rechargeChart = ref<HTMLElement>()
let userChartInstance: echarts.ECharts | null = null
let rechargeChartInstance: echarts.ECharts | null = null

const periods = [
  { label: '7天', value: '7d' },
  { label: '30天', value: '30d' },
  { label: '90天', value: '90d' },
]

const currentPeriod = ref('7d')
const currentRechargePeriod = ref('7d')

// 模拟图表数据
const generateChartData = (days: number) => {
  const data = []
  const now = new Date()
  for (let i = days - 1; i >= 0; i--) {
    const date = new Date(now)
    date.setDate(date.getDate() - i)
    data.push({
      date: date.toLocaleDateString('zh-CN', { month: '2-digit', day: '2-digit' }),
      value: Math.floor(Math.random() * 100) + 50,
    })
  }
  return data
}

const initUserChart = () => {
  if (!userChart.value) return

  userChartInstance = echarts.init(userChart.value)
  const data = generateChartData(
    currentPeriod.value === '7d' ? 7 : currentPeriod.value === '30d' ? 30 : 90,
  )

  const option = {
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(255, 255, 255, 0.95)',
      borderColor: '#e5e7eb',
      borderWidth: 1,
      textStyle: {
        color: '#374151',
      },
      formatter: (params: any) => {
        return `${params[0].axisValue}<br/>新增用户: ${params[0].value}`
      },
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: data.map((item) => item.date),
      axisLine: {
        lineStyle: {
          color: '#e5e7eb',
        },
      },
      axisLabel: {
        color: '#6b7280',
      },
    },
    yAxis: {
      type: 'value',
      axisLine: {
        lineStyle: {
          color: '#e5e7eb',
        },
      },
      axisLabel: {
        color: '#6b7280',
      },
      splitLine: {
        lineStyle: {
          color: '#f3f4f6',
        },
      },
    },
    series: [
      {
        name: '新增用户',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 4,
        lineStyle: {
          color: '#3b82f6',
          width: 2,
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(59, 130, 246, 0.1)' },
            { offset: 1, color: 'rgba(59, 130, 246, 0)' },
          ]),
        },
        itemStyle: {
          color: '#3b82f6',
        },
        data: data.map((item) => item.value),
      },
    ],
  }

  userChartInstance.setOption(option)
}

const initRechargeChart = () => {
  if (!rechargeChart.value) return

  rechargeChartInstance = echarts.init(rechargeChart.value)
  const data = generateChartData(
    currentRechargePeriod.value === '7d' ? 7 : currentRechargePeriod.value === '30d' ? 30 : 90,
  )

  const option = {
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(255, 255, 255, 0.95)',
      borderColor: '#e5e7eb',
      borderWidth: 1,
      textStyle: {
        color: '#374151',
      },
      formatter: (params: any) => {
        return `${params[0].axisValue}<br/>充值金额: ¥${params[0].value}`
      },
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: data.map((item) => item.date),
      axisLine: {
        lineStyle: {
          color: '#e5e7eb',
        },
      },
      axisLabel: {
        color: '#6b7280',
      },
    },
    yAxis: {
      type: 'value',
      axisLine: {
        lineStyle: {
          color: '#e5e7eb',
        },
      },
      axisLabel: {
        color: '#6b7280',
        formatter: '¥{value}',
      },
      splitLine: {
        lineStyle: {
          color: '#f3f4f6',
        },
      },
    },
    series: [
      {
        name: '充值金额',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 4,
        lineStyle: {
          color: '#10b981',
          width: 2,
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(16, 185, 129, 0.1)' },
            { offset: 1, color: 'rgba(16, 185, 129, 0)' },
          ]),
        },
        itemStyle: {
          color: '#10b981',
        },
        data: data.map((item) => item.value * 100), // 放大数值以模拟真实充值数据
      },
    ],
  }

  rechargeChartInstance.setOption(option)
}

// 监听周期变化
watch([currentPeriod, currentRechargePeriod], () => {
  nextTick(() => {
    initUserChart()
    initRechargeChart()
  })
})

// 窗口大小改变时重新渲染图表
const handleResize = () => {
  userChartInstance?.resize()
  rechargeChartInstance?.resize()
}

onMounted(() => {
  nextTick(() => {
    initUserChart()
    initRechargeChart()
  })

  window.addEventListener('resize', handleResize)
})

// 清理
onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
  userChartInstance?.dispose()
  rechargeChartInstance?.dispose()
})
</script>

<style scoped>
.data-statistics {
  padding: 24px;
  background: #ffffff;
  min-height: 100%;
  box-sizing: border-box;
}

.page-header {
  margin-bottom: 32px;
  text-align: center;
}

.page-title {
  font-size: 28px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 8px;
}

.page-subtitle {
  font-size: 16px;
  color: #6b7280;
}

/* 统计卡片样式 */
.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-bottom: 32px;
}

.stats-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 12px;
  padding: 24px;
  box-shadow:
    0 3px 12px rgba(0, 0, 0, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.8);
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.8);
  position: relative;
  overflow: hidden;
}

.stats-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.8) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  z-index: 1;
}

.stats-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.3) 0%,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0) 60%,
    rgba(255, 255, 255, 0.1) 100%
  );
  pointer-events: none;
}

.stats-card:hover {
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.9);
  transform: translateY(-2px);
}

.stats-card:nth-child(1) {
  background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%);
  box-shadow:
    0 3px 12px rgba(59, 130, 246, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.8);
}

.stats-card:nth-child(2) {
  background: linear-gradient(135deg, #ffffff 0%, #fdf2f8 100%);
  box-shadow:
    0 3px 12px rgba(245, 158, 11, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.8);
}

.stats-card:nth-child(3) {
  background: linear-gradient(135deg, #ffffff 0%, #fffbeb 100%);
  box-shadow:
    0 3px 12px rgba(16, 185, 129, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.8);
}

.stats-card:nth-child(4) {
  background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
  box-shadow:
    0 3px 12px rgba(139, 92, 246, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.8);
}

.card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 8px;
}

.user-icon {
  background: #dbeafe;
  color: #3b82f6;
}

.vip-icon {
  background: #fef3c7;
  color: #f59e0b;
}

.recharge-icon {
  background: #d1fae5;
  color: #10b981;
}

.ai-icon {
  background: #e9d5ff;
  color: #8b5cf6;
}

.card-title {
  font-size: 18px;
  font-weight: 600;
  color: #374151;
}

.card-content {
  text-align: center;
}

.total-number {
  font-size: 36px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 16px;
}

.stats-breakdown {
  display: flex;
  justify-content: space-around;
  gap: 16px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.stat-label {
  font-size: 12px;
  color: #6b7280;
}

.stat-value {
  font-size: 16px;
  font-weight: 600;
  color: #059669;
}

/* 图表区域样式 */
.charts-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  gap: 24px;
}

.chart-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 12px;
  padding: 24px;
  box-shadow:
    0 3px 12px rgba(0, 0, 0, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.8);
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.8);
  position: relative;
  overflow: hidden;
}

.chart-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.8) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  z-index: 1;
}

.chart-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.3) 0%,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0) 60%,
    rgba(255, 255, 255, 0.1) 100%
  );
  pointer-events: none;
}

.chart-card:hover {
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.9);
  transform: translateY(-2px);
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.chart-title {
  font-size: 18px;
  font-weight: 600;
  color: #374151;
}

.chart-period {
  display: flex;
  gap: 8px;
}

.period-btn {
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  background: linear-gradient(135deg, #ffffff 0%, #f3f4f6 100%);
  border-radius: 6px;
  font-size: 14px;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow:
    0 2px 5px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  position: relative;
  overflow: hidden;
}

.period-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.8) 50%,
    rgba(255, 255, 255, 0) 100%
  );
}

.period-btn:hover {
  border-color: #3b82f6;
  color: #3b82f6;
  box-shadow:
    0 3px 8px rgba(59, 130, 246, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.period-btn.active {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  border-color: #2563eb;
  color: white;
  box-shadow:
    0 3px 8px rgba(59, 130, 246, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.chart-content {
  height: 300px;
}

.chart-canvas {
  width: 100%;
  height: 100%;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .data-statistics {
    padding: 16px;
  }

  .stats-cards {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .charts-container {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .chart-card {
    padding: 16px;
  }

  .stats-breakdown {
    flex-direction: column;
    gap: 12px;
  }

  .chart-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}
</style>
